<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {reactive,ref  } = Vue

    //专门定义一个input输入框的函数
    const inputRelativeEffect = () => {
        const inputVal = ref('');
        return { inputVal }
    }

    //定义一个专门用于处理 todoList 的函数
    const listRelativeEffect = () => {
        let todoList = reactive([]);
        function handleToSubmit(e){
            console.log(e)
            todoList.push(e);
        }
        return { todoList,handleToSubmit}
    }
    const app = Vue.createApp({
        template: `
            <h3 style="color: red">使用 CompositionAPI 实现 TodoList</h3>
             <div>
                <input v-model="inputVal" />
                <button @click="handleToSubmit(inputVal)">提交</button>   
            </div>
            <div>
                <ul>
                    <li v-for="(item,index) in todoList" :key="index">
                        {{item}}
                    </li>
                </ul>
            </div>
        `,
        setup(props) {
            const { inputVal } = inputRelativeEffect();
            const { todoList,handleToSubmit } = listRelativeEffect();
            return {inputVal,todoList,handleToSubmit }
        }
    })
        
    

    app.mount("#app")
</script>
</html>